<template>
  <!-- <h1>{{filmInfo.name}}</h1> -->
  <div class="nav">
    <div class="dianying">
      <img :src="filmInfo.poster" />
    </div>
    <div class="mingzi">
      <h3>{{ filmInfo.name }}</h3>
      <span class="fen">{{ filmInfo.item.name }}</span>
      <p v-if="filmInfo.grade" class="you">{{ filmInfo.grade }}分</p>
      <p v-else="filmInfo.grade" class="you">{{ filmInfo.grade }}暂无评分</p>
      <p class="xi">{{ filmInfo.category }}</p>
      <p class="xi">2022-07-27</p>
      <p class="xi">{{ filmInfo.nation }}|{{ filmInfo.runtime }}分钟</p>
      <p class="xi">{{ filmInfo.synopsis }}</p>
    </div>
    <div class="kong">
      <div class="kongbai"></div>
    </div>

    <div class="yan">
      <div class="zhi">
        <h4>演职人员</h4>
      </div>

      <div class="ren" v-for="actor in filmInfo.actors" :key="actor">
        <img :src="actor.avatarAddress" />
        <!-- <img src="https://static.maizuo.com/pc/v5/usr/movie/bc8bb78d1e65144fcdf41930c26126e4.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
          <img src="https://static.maizuo.com/pc/v5/usr/movie/ded7c9e2476918b81b4d0aa79ea304a1.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
          <img src="https://static.maizuo.com/pc/v5/usr/movie/b44a7a25ce138b32d15fbbbb2a35afc6.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
          <img src="https://static.maizuo.com/pc/v5/usr/movie/cfe1dad832a224877481de2e684cd4dd.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt=""> -->
        <div>
          <span>{{ actor.name }}</span>
          <p class="zhi">{{ actor.role }}</p>
        </div>

        <!-- <div>
          <span>沈腾</span>
          <span class="zhi">独孤月</span>
         </div>
       <div>
        <span>马丽</span>
        <span class="zhi">马蓝星</span>
       </div>
        <div>
          <span>常远</span>
          <span class="zhi">朱皮特</span>
         
        </div>
      <div>
        <span>李诚儒</span>
        <span class="zhi">孙光阳</span>
        
      </div> -->
      </div>

      <!-- 22 -->

      <!-- <div class="ren">
        <img :src="filmInfo.actors[1].avatarAddress" /> -->
        <!-- <img src="https://static.maizuo.com/pc/v5/usr/movie/ded7c9e2476918b81b4d0aa79ea304a1.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
          <img src="https://static.maizuo.com/pc/v5/usr/movie/b44a7a25ce138b32d15fbbbb2a35afc6.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
          <img src="https://static.maizuo.com/pc/v5/usr/movie/cfe1dad832a224877481de2e684cd4dd.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt=""> -->
        <!-- <div>
          <span>{{ filmInfo.actors[1].name }}</span>
          <p class="zhi">{{ filmInfo.actors[1].role }}</p>
        </div>
      </div>

      <div class="ren">
        <img :src="filmInfo.actors[2].avatarAddress" />
       <img src="https://static.maizuo.com/pc/v5/usr/movie/b44a7a25ce138b32d15fbbbb2a35afc6.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt="">
    <img src="https://static.maizuo.com/pc/v5/usr/movie/cfe1dad832a224877481de2e684cd4dd.jpg@1246w_1246h_1l_0e?x-oss-process=image/quality,Q_70" alt=""> -->
        <!-- <div>
          <span>{{ filmInfo.actors[2].name }}</span>
          <p class="zhi">{{ filmInfo.actors[2].role }}</p>
        </div>
      </div> -->

      <!-- <div class="ren">
        <img :src="filmInfo.actors[3].avatarAddress" />
        <div>
          <span>{{ filmInfo.actors[3].name }}</span>
          <p class="zhi">{{ filmInfo.actors[3].role }}</p>
        </div>
      </div> -->
<!-- 
      <div class="ren">
        <img :src="filmInfo.actors[4].avatarAddress" />
        <div>
          <span>{{ filmInfo.actors[4].name }}</span>
          <p class="zhi">{{ filmInfo.actors[4].role }}</p>
        </div>
      </div> -->
    </div> 

    <div class="kong2">
      <div class="kongbai2"></div>
    </div>

    <!-- 6 -->
    <div class="ju">
      <div class="zhao">
        <p>剧照</p>
        <span>全部(5)</span>
      </div>
      <div class="juzhao">
        <img :src="photo"  v-for="photo in filmInfo.photos" :key="photo">
        <!-- <img :src="filmInfo.photos[1]" />
        <img :src="filmInfo.photos[2]" />
        <img :src="filmInfo.photos[3]" />
        <img :src="filmInfo.photos[4]" /> -->
      </div>
    </div>

    <div class="xuan">
      <a href="">
        <div>选座购票</div>
      </a>
    </div>
  </div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.nav {
  width: 100%;

}

.dianying {
  width: 100%;
 
}

.dianying img {
  width: 100%;
}

.mingzi {
  /* width: 100%; */
  margin-top: 20px;
  margin-left: 2%;
}

.mingzi h3 {
  float: left;
  color: #191a1b;
  font-weight: 200;
  height: 20px;
  margin-bottom: 20px;
}

.mingzi .fen {
  display: inline-block;
  margin-left: 15px;
  margin-top: 2px;
  width: 25px;
  height: 20px;
  background-color: #d2d6dc;
  color: #fefefe;
}

.mingzi .you {
  float: right;
  color: #ffc461;
  font-size: 20px;
  font-weight: 400;
}

.mingzi .xi {
  clear: both;
  color: #bdbfc1;
  font-size: 15px;
  font-weight: 300;
  padding-top: 10px;
}

.kong .kongbai {
  width: 100%;
  height: 20px;
  background-color: aqua;
  margin-top: 70px;
}

.yan {
  margin-top: 20px;
  /* width: 100%; */
  margin-left: 2%;
  font-weight: 100;
  color: #191a1b;
}

.yan .ren {
  float: left;
  margin-top: 20px;
}

.yan .ren img {
  cursor: pointer;
  clear: both;
  width: 70px;
  padding-right: 15px;
  height: 100px;
}

.yan .ren span {
  padding-left: 17%;
}

.yan .ren .zhi {
  margin-bottom: 20px;
  font-size: 15px;
  padding-left: 17%;
}

.kong2 .kongbai2 {
  clear: both;
  width: 100%;
  height: 20px;
  background-color: aqua;
}

.ju {
  position: relative;
  margin-top: 20px;
  margin-left: 2%;
}

.zhao p {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 200;
}

.zhao span {
  color: salmon;
  position: absolute;
  top: 0;
  right: 0;
}

.juzhao img {
  cursor: pointer;
  width: 76px;
  height: 100px;
  padding-right: 10px;
  margin-bottom: 80px;
}

.xuan {
  width: 100%;
  position: fixed;

  bottom: 0;
  height: 50px;
  background-color: #ff5f16;
}

.xuan a {
  color: #d2d6dc;
  font-size: 20px;
}

.xuan a div {
  text-align: center;
  line-height: 50px;
}
</style>
<script>
import { getMzFilmById, getMzFilmDetail } from "@/api/product";

export default {
  data() {
    return {
      code: 0,
      filmInfo: {},
    };
  },
  methods: {
    clickMethods() {
      console.log(123);
    },
  },
  created() {
    getMzFilmById(this.$route.query.eee).then((res) => {
      this.filmInfo = res.data.data.film;
      console.log("-----", this.filmInfo);
    });
  },
};
</script>
